<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">    
    <h:body>
        <ui:composition template="templates/template.xhtml">
            <ui:define name="title">Nouveau produit - Administration ShopEasy</ui:define>
            <ui:define name="content">
                <section class="wrapper style2">
                    <div class="container">
                        <div id="content">
                            <h:form>                                
                                <p:fieldset legend="Nouveau produit" style="margin-bottom:20px;">

                                    <p:growl id="messages" />

                                    <h:panelGrid columns="2" cellpadding="5" style="margin-bottom:20px">
                                        <p:outputLabel for="libelle" value="Libellé:" style="margin-right: 80px"/>
                                        <p:inputText id="libelle" value="#{vueAjoutProduit.produit.libelle}" required="true" />

                                        <p:outputLabel for="prix" value="Prix:" />
                                        <p:inputText id="prix" value="#{vueAjoutProduit.produit.prix}" required="true" >
                                            <f:validateDoubleRange minimum="0.01" />
                                        </p:inputText>

                                        <p:outputLabel for="typeproduit" value="Unité:" />
                                        <p:selectOneMenu id="typeproduit" value="#{vueAjoutProduit.produit.type}" required="true" styleClass="vertical-align" >
                                            <f:selectItem itemLabel="Choisir" />
                                            <f:selectItem itemLabel="prix/kg" itemValue="kg" />
                                            <f:selectItem itemLabel="prix/piece" itemValue="piece" />
                                        </p:selectOneMenu>                                        
                                    </h:panelGrid>

                                    <p:panel header="Rayon" style="margin-bottom: 20px" styleClass="vertical-align">                                        
                                        <h:panelGrid columns="2" cellpadding="5">
                                            <p:outputLabel for="rayon" value="Rayon:" style="margin-right: 60px;" styleClass="not-vertical-align"/>
                                            <p:selectOneMenu id="rayon" value="#{vueAjoutProduit.idRayonSelectionne}" required="true" >
                                                <f:selectItem itemLabel="Choisir" />
                                                <f:selectItems value="#{vueAjoutProduit.rayons}" var="rayon" itemLabel="#{rayon.nom} n°#{rayon.position}" itemValue="#{rayon.id}" />                                              
                                            </p:selectOneMenu>                                                                
                                        </h:panelGrid>
                                        <f:facet name="actions">
                                            <p:button outcome="ajoutRayon.xhtml" title="Ajouter nouveau rayon" value="Nouveau" styleClass="ui-panel-titlebar-icon"/>
                                        </f:facet>
                                    </p:panel>

                                    <p:panel header="Promotion" style="margin-bottom: 20px">                                        
                                        <h:panelGrid columns="2" cellpadding="5">
                                            <h:outputLabel for="typepromo" value="Type:" style="margin-right: 90px"/>
                                            <p:selectOneMenu id="typepromo" value="#{vueAjoutProduit.promotion.type}" styleClass="vertical-align" style="padding-right: 15px" >
                                                <f:selectItem itemLabel="Choisir" itemValue="" />
                                                <f:selectItem itemLabel="%" itemValue="%" />
                                                <f:selectItem itemLabel="€" itemValue="€" />
                                            </p:selectOneMenu>

                                            <h:outputLabel for="valeurpromo" value="Valeur:" />
                                            <p:inputText id="valeurpromo" value="#{vueAjoutProduit.promotion.valeur}" />

                                            <h:outputLabel for="quantitepromo" value="Quantité:" />
                                            <p:spinner id="quantitepromo" value="#{vueAjoutProduit.promotion.quantiteNecessaire}" />                                            
                                        </h:panelGrid>
                                    </p:panel>

                                    <p:panel header="Catégorie" style="margin-bottom: 20px;" styleClass="vertical-align">
                                        <p:panelGrid style="width: 100%">
                                            <p:row>
                                                <p:column>
                                                    <h:panelGrid columns="3" cellpadding="5">
                                                        <p:outputLabel for="categorie" value="Catégorie:" style="margin-right: 25px" styleClass="not-vertical-align" />
                                                        <p:selectOneMenu id="categorie" value="#{vueAjoutProduit.idCategorieSelectionnee}" effect="fade" style="width: 250px" filter="true" 
                                                                         filterMatchMode="startsWith" panelStyleClass="search-dropdown-icon" required="true" >
                                                            <p:ajax event="valueChange" update="descriptioncat" />
                                                            <f:selectItem itemLabel="Choisir" itemValue="-1" />
                                                            <f:selectItems value="#{vueAjoutProduit.categories}" var="c" itemLabel="#{c.libelle}" itemValue="#{c.id}" />                                                            
                                                        </p:selectOneMenu>
                                                        <p:commandButton id="btnAjoutCat" icon="ui-icon-plus" actionListener="#{vueAjoutProduit.ajouterCategorie()}" update="catAjoutee" process="@this"/>
                                                    </h:panelGrid>

                                                    <h:panelGrid columns="2" cellpadding="5">
                                                        <p:outputLabel for="descriptioncat" value="Description:" style="margin-right: 28px"/>
                                                        <p:inputTextarea id="descriptioncat" cols="50" readonly="true" value="#{vueAjoutProduit.categorieSelectionnee.description}"/>
                                                    </h:panelGrid>
                                                </p:column>
                                                <p:column>
                                                    <p:dataList id="catAjoutee" value="#{vueAjoutProduit.produit.categories}" var="cat" >                                                        
                                                        <f:facet name="header">
                                                            Liste
                                                        </f:facet>
                                                        <p:commandLink process="catAjoutee" update="catAjoutee" title="Supprimer" action="#{vueAjoutProduit.supprimerCategorie(cat)}"
                                                                       styleClass="ui-icon ui-icon-trash" style="float:right;margin:5px 30px 0 10px;" />
                                                        <h:outputText value="#{cat.libelle}" style="display:inline-block"/>
                                                    </p:dataList>
                                                </p:column>
                                            </p:row>
                                        </p:panelGrid>
                                        <f:facet name="actions">
                                            <p:button outcome="ajoutCategorie.xhtml" title="Ajouter nouvelle catégorie" value="Nouvelle" styleClass="ui-panel-titlebar-icon"/>
                                        </f:facet>
                                    </p:panel>                                    
                                    <h4>Photo:</h4>
                                    <p:fileUpload fileUploadListener="#{vueAjoutProduit.uploadImage}" mode="advanced" dragDropSupport="true"
                                                  update="messages" sizeLimit="200000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" style="margin-bottom:20px"/>                                      

                                    <p:commandButton value="Ajouter" update="@form" actionListener="#{vueAjoutProduit.ajouterProduit()}" />
                                </p:fieldset>                               
                            </h:form>                            
                        </div>
                    </div>
                </section>
            </ui:define>
        </ui:composition> 
    </h:body>
</html>